<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.rolename" v-enter @enter.native="getRoleId" placeholder="角色名"></el-input>
					<input id="hiddenText" type="text" style="display:none" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getRoleId">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="role" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="index" width="115">
			</el-table-column>
			<el-table-column prop="roleid" label="角色ID" width="150" sortable >
			</el-table-column>
			<el-table-column prop="rolename" label="角色名" width="300" sortable>
			</el-table-column>
			<el-table-column prop="comment" label="备注" width="150" sortable>
			</el-table-column>		
			<el-table-column label="操作" width="363">
				<template scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="primary" size="small" @click="handlePost(scope.$index, scope.row)">分配资源</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row,role)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--分配资源界面-->
		<el-dialog title="分配资源" v-model="assignResources" :close-on-click-modal="false">
			<el-form :model="assignForm" label-width="80px"  ref="assignForm">
				<el-form-item label="选择资源" prop="resources">
					<el-select v-model="value"  multiple placeholder="请选择" :loading="Rloading">
    					<el-option v-for="item in options" :label="item.typeresourcesname" :value="item.resourcesid">
    					</el-option>
 				 	</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="assignResources = false;value=[]">取消</el-button>
				<el-button type="primary" @click.native="assignSubmit" :loading="assignLoading">提交</el-button>
			</div>
		</el-dialog>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
			<el-form :model="editForm" label-width="80px"  ref="editForm">
				<el-form-item label="角色名" prop="rolename">
					<el-input v-model="editForm.rolename" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-input v-model="editForm.comment" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px"  ref="addForm">
				<el-form-item label="角色名" prop="name">
					<el-input v-model="addForm.rolename" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="comment">
					<el-input v-model="addForm.comment" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				options:[],
				value: [],
				Rloading:false,
				filters: {
					rolename: ''
				},
				role: [],
				total: 0,
				page: 0,
				listLoading: false,
				sels: [],//列表选中列

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,
				//分配界面是否显示
				assignResources:false,
				assignLoading:false,
				//分配页面数据
				assignForm:{
					roleid:'',
					rolename:''
				},
				//编辑界面数据
				editForm: {
					roleid: '',
					rolename: '',
					comment:'',
				},

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
	
				//新增界面数据
				addForm: {
					rolename: '',
					comment:'',
				}

			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val-1;
				this.getRole();
			},
			//获取资源列表
			getResources() {
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			this.Rloading = true;
			$.ajax({
				type:"GET",
				url:"http://101.200.56.75/apis/resources/getList/?page=0&size=1000&key=parentid&operation=neq&value=0&token="+tokenname+"&sort=resourcesid,asc",
				dataType:"JSON",
				success:function(msg){
					if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.fail==0){
						_this.Rloading = false;
						_this.$alert(msg.payload.msg,{
							type:'warning'
						})
						}else{
						_this.Rloading = false;
						_this.options = msg.payload.content;}
						}else{
						_this.Rloading = false;
						_this.$alert(msg.payload,{
							type:'warning'
						});
						_this.Rloading = false;
						_this.$router.push({ path: '/login' });
						}
					 }
				});	
			},
			//获取角色列表
			getRole() {
			var tokenname = sessionStorage.getItem("key");
			this.listLoading = true;
			var _this = this;
			var pages = this.page;
			$.ajax({
				type:"GET",
				url:"http://101.200.56.75/apis/role/getList?page="+pages+"&size=10&token="+tokenname+"&sort=roleid,asc",
				dataType:"JSON",
				success:function(msg){
					if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.success==1){
							_this.role = msg.payload.content.content;
							_this.total = msg.payload.content.totalElements;
							_this.listLoading = false;
							}else{
							_this.listLoading = false;
							_this.$alert(msg.payload.msg,{
							type:'warning'
						});
							}
						}else{
							_this.$alert(msg.payload.msg,{
							type:'warning'
						});
							_this.$router.push({ path: '/login' });
					}
				 }
			});	
			},
			//查询
			getRoleId(){
			var tokenname = sessionStorage.getItem("key");
			this.listLoading = true;
			var _this = this;
			var dataName = this.filters.rolename;
			$.ajax({	
				type:"GET",
				url:"http://101.200.56.75/apis/role/getList?page=0&size=10&sort=roleid,asc&key=rolename&operation=likebe&value="+dataName+"&token="+tokenname,
				dataType:"JSON",
				success:function(msg){
					if(msg.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.fail==0){
							_this.filters.rolename = null;
							_this.listLoading = false;
							_this.$alert(msg.payload.msg,{
							type:'warning'
					});
						}
						if(msg.payload.content.totalElements!=0){
							_this.role = msg.payload.content.content;
							_this.total = msg.payload.content.totalElements;
							_this.listLoading = false;
							}else{
								_this.listLoading = false;
								_this.filters.rolename = null;
								_this.$alert("没有查询到相关的用户信息",{
											type:'info'
								}).then(() => {
									_this.getRole();
								})
								}
						}else{
							_this.$alert(msg.payload.msg,{
							type:'warning'
					});
							_this.$router.push({ path: '/login' });
						}
				}
			})
			},
			//删除
			handleDel: function (index, row,role) {
				var index = index;
				var rows = role;
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
				var tokenname = sessionStorage.getItem("key");
				this.listLoading = true;
				var _this = this;
				this.$http({
					method:'DELETE',
					url:'http://101.200.56.75/apis/role/deleteByIds?token='+tokenname,
					body:{rows:[row.roleid]},
					headers: {"X-Requested-With": "XMLHttpRequest"},
				}).then(function(msg){
					if(msg.body.payload.msg!="token 过期或者token不存在 请重新登陆"){
						if(msg.body.payload.fail==0){
						_this.listLoading = false;
							_this.$alert(msg.body.payload.msg,{
							type:'warning'
					});
						}else{
							rows.splice(index, 1);
							_this.listLoading = false;
							_this.$message({
											message:'删除成功',
											type:'success'
											});
							}
						}else{
							_this.$alert(msg.payload.msg,{
							type:'warning'
					});
							_this.$router.push({ path: '/login' });
					}
				
				})
				});
			},
			//显示分配界面
			handlePost:function (index,row) {
				this.getResources();
				this.assignResources = true;
				this.assignForm = Object.assign({},row);

			},
			//显示编辑界面
			handleEdit: function (index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row)
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					rolename: '',
					comment:'',
				};
			},
			//分配
			assignSubmit:function(){
			this.assignLoading = true;
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			var data = {
					//rolename:this.assignForm.rolename,
					resourcesid:this.value
				};
			if(this.value!=""){
				$.ajax({
					data:JSON.stringify(data),
					url:"http://101.200.56.75/apis/roleResources/updateByRolename?rolename="+this.assignForm.rolename+"&token="+tokenname,
					type:"PUT",
					dataType:"JSON",
					contentType:'application/json;charset=UTF-8',
					success:function(msg){
						if(msg.payload!="token 过期或者token不存在 请重新登陆"){
							if(msg.payload.success==1){
								_this.value=[];
								_this.assignLoading = false;
								_this.$message({
											message:"分配成功",
											type:'success'
								})
								_this.assignResources = false;}else{
								_this.value=[];
								_this.assignLoading = false;
								_this.assignResources = false;
								_this.$alert(msg.payload.msg,{
		type:'warning'
			});
														}
						}else{
								_this.$alert(msg.payload,{
								type:'warning'
									});
								_this.$router.push({ path: '/login' });
							}
					}
				})
			}else{
				_this.$alert("请选择资源",{
					type:'warning'
				})
				}
			},
			//编辑
			editSubmit: function () {
			var tokenname = sessionStorage.getItem("key");
			var _this = this;
			var data = {
				roleid:this.editForm.roleid,
				rolename:this.editForm.rolename
				};
			if(this.editForm.rolename!=''){
				this.$confirm('确认提交吗？', '提示', {}).then(() => {
				this.editLoading = true;
				$.ajax({
					data:JSON.stringify(data),
					url:"http://101.200.56.75/apis/role/updateById?token="+tokenname,
					type:"PUT",
					dataType:"JSON",
					contentType:'application/json;charset=UTF-8',
					success:function(msg){
						if(msg.payload!="token 过期或者token不存在 请重新登陆"){
						if(msg.payload.fail==0){
						_this.editFormVisible = false;
	             	                 	_this.editLoading = false;
						_this.$alert(msg.payload.msg,{
										type:'warning'
										});
						}else
							{if(msg.payload.content.rolename==_this.editForm.rolename&&msg.payload.content.roleid==_this.editForm.roleid){
															_this.editLoading = false;
															_this.$message({
																	message:'修改成功',
																	type:'success'
																	});
															_this.editFormVisible = false;
															_this.getRole();
																}else{
																	_this.$alert(msg.payload.msg,{
																	type:'warning'
																	});
								             	                 	_this.editFormVisible = false;
								             	                 	_this.editLoading = false;
																		}}
												}else{
													_this.$alert(msg.payload,{
													type:'warning'
													});
												_this.$router.push({ path: '/login' });
											}
					},
					error:function(msg){
						_this.editLoading = false;
						_this.$alert(msg.payload,{
							type:'error'
						})
					}
				})})
			}else{
				_this.$alert("角色名不能为空",{
				type:'warning'
				})
			}	
			},
			//新增
			addSubmit: function () {
				var tokenname = sessionStorage.getItem("key");
				var _this = this;
				var data = {
            		rolename:this.addForm.rolename,
      					};
				if(this.addForm.rolename!=''){
					this.$confirm('确认提交吗？', '提示', {}).then(() =>{
						this.addLoading = true;
	   					$.ajax({  
	             			data:JSON.stringify(data),       //要发送的数据
	          				url:"http://101.200.56.75/apis/role/create/?token="+tokenname, //url地址 
		              		type:"POST",           //发送的方式  
		             		dataType:"JSON", 
		              		contentType:'application/json;charset=UTF-8', 
		              		success:function(msg){  //处理正确时的信息 
			              		if(msg.payload!="token 过期或者token不存在 请重新登陆"){
			              			if(msg.payload.content.rolename==_this.addForm.rolename){
			              				_this.addLoading = false;
				                 		_this.$message({
		                 							message: '新增成功',
		                 							type: 'success'
		                 									});
	 									_this.$refs['addForm'].resetFields();
	             	                 	_this.addFormVisible = false;
	             	                 	_this.getRole();
		                 	                 	}else{
			                 	                 	_this.$alert(msg.payload,{
		                 	                 		type:'error'
		                 	                 			});
			                 	                 	_this.addFormVisible = false;
	         	                 			}
		                 	                 	}else{
													_this.$alert(msg.payload,{
													type:'warning'
												});
													_this.$router.push({ path: '/login' });
												}
         	                 	},
     	                 	error:function(msg){
 				              		_this.$message({
 											message: '新增请求失败',
 											type: 'error'
 										});
 		              		}
 		        		});
 			           })
	                 			          }else{
	                 					          _this.$alert("角色名不能为空！！",{
	                 					          	type:'warning'
	                 					          })
	                 				          }
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			},
		mounted() {
			this.getRole();
			//this.getResources();
		}
	}
	

</script>

<style scoped>

</style>